<template>
  <div>
    <!-- 
          action：上传的地址
          data：额外的参数
          before-upload：上传前（携带额外参数，根据类型来判断上传的图片类型和大小）
          on-success: 预览（分情况去处理视频或是图片预览）、给父组件相关的属性赋值
      -->
    <el-upload
      class="avatar-uploader"
      :action="uploadUrl"
      :data="uploadObj"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <video
        v-else-if="videoUrl"
        :src="videoUrl"
        controls
        class="avatar"
      ></video>
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: 'UploadFile',
  props: {
    type: {
      type: String,
      default: 'image'
    },
    obj: Object
  },
   watch: {
    'obj.video' (newValue) {
      this.videoUrl = process.env.VUE_APP_BASEURL + '/' + newValue
    },
    'obj.image' (newValue) {
      this.imageUrl = process.env.VUE_APP_BASEURL + '/' + newValue
    }
  },
  data () {
    return {
      uploadUrl: process.env.VUE_APP_BASEURL + '/question/upload',
      uploadObj: {}, // 上传需要的额外参数
      imageUrl: '', // 图片预览的地址
      videoUrl: '' // 视频预览地址
    }
  },
  methods: {
    handleAvatarSuccess (res, file) {
      // 成功
      if (res.code === 200) {
        if (this.type === 'image') {
          // 图片预览
          this.imageUrl = URL.createObjectURL(file.raw)

          // todo 给父组件的图片属性赋值
          this.obj.image = res.data.url
        } else {
          // 视频预览
          this.videoUrl = URL.createObjectURL(file.raw)

          // 给父组件的video属性赋值
          this.obj.video = res.data.url
        }
      } else {
        this.$message({
          type: 'error',
          message: res.message,
          duration: 1000
        })
      }
    },
    beforeAvatarUpload (file) {
      // 携带额外参数
      this.uploadObj.file = file

      if (this.type === 'image') {
        const isImage =
          file.type === 'image/jpeg' ||
          file.type === 'image/png' ||
          file.type === 'image/gif'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isImage) {
          this.$message.error('上传图片只能是 JPG|PNG|GIF 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!')
        }
        return isImage && isLt2M
      } else {
        const isVideo = file.type === 'video/mp4' || file.type === 'video/avi'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isVideo) {
          this.$message.error('上传的解析视频只能是 MP4|AVI 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传的解析视频大小不能超过 2MB!')
        }
        return isVideo && isLt2M
      }
    }
  }
}
</script>

<style scoped>
::v-deep .avatar-uploader {
  text-align: left;
}
</style>
